<template>
	<view class="login-container">
		<view class="logo">
			<image src="/static/login/Frame 5@3x.png" mode="aspectFit"></image>
			<image src="/static/Frame 6@3x.png" mode="aspectFit" style="margin-top: -40rpx;"></image>
		</view>

		
		<!-- 主登录区域 -->


		<!-- 主登录区域view -->

		<view class="main-login-area">
			<!-- 一键登录内容 -->
			<!-- 		<view class="login-content" v-if="loginType === 'quick'">
				<view class="agreement">
					<checkbox-group @change="toggleAgreement">
						<label class="agreement-checkbox">
							<checkbox :checked="agreed" color="#1E90FF" style="transform:scale(0.7)" />
							<text>我已阅读并同意</text>
						</label>
					</checkbox-group>
					<view class="agreement-text">
						<text>若手机号未注册将进入注册流程，注册即为同意</text>
					</view>
					<view class="agreement-links">
						<text class="link" @click="showAgreement">《启点直播用户服务协议》</text>
						<text>及</text>
						<text class="link" @click="showPrivacy">《启点直播隐私政策》</text>
					</view>
				</view>
				<view class="login-btn" @click="handleQuickLoginClick">
					<view class="btn-content">
						<text>一键登录</text>
					</view>
				</view>
			</view> -->

			<!-- 手机号登录内容 -->
			<!-- <view class="login-content" v-if="loginType === 'phone'"> -->
			<view class="login-content">
				<view class="input-group">
					<view class="input-item">
						<view class="input-with-icon">
							<image src="/static/login/Frame.png" mode="aspectFit" class="input-icon"></image>
							<input type="number" placeholder="请输入您的手机号" v-model="phoneNumber" maxlength="11"
								@blur="validatePhone" />
						</view>
						<text class="error-msg" v-if="phoneError">{{phoneError}}</text>
					</view>
					<view class="input-item">
						<view class="input-with-icon">
							<image src="/static/login/Frame(1).png" mode="aspectFit" class="input-icon"></image>
							<input type="number" placeholder="请输入验证码" v-model="smsCode" maxlength="6"
								@input="clearSmsError" />
						</view>
						<view class="send-code" :class="{disabled: countdown > 0}" @tap="sendSMSCode">
							{{ countdown > 0 ? `${countdown}s` : '发送验证码' }}
						</view>
						<text class="error-msg" v-if="smsError">{{smsError}}</text>
					</view>
				</view>

				<view class="login-btn" @click="handlePhoneLoginClick">
					<view class="btn-content">
						<text>登录</text>
					</view>
				</view>

				<view class="agreement">
					<checkbox-group @change="toggleAgreement">
						<label class="agreement-checkbox">
							<checkbox :checked="agreed" color="#1E90FF" style="transform:scale(0.7)" />
							<text>我已阅读并同意</text>
						</label>
					</checkbox-group>
					<view class="agreement-text">
						<text>若手机号未注册将进入注册流程，注册即为同意</text>
					</view>
					<view class="agreement-links">
						<text class="link" @click="showAgreement">《启点直播用户服务协议》</text>
						<text>及</text>
						<text class="link" @click="showPrivacy">《启点直播隐私政策》</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部切换登录方式 -->
		<!-- 	<view class="switch-login-type">
			<view class="divider-line"></view>
			<text class="divider-text">其他登录方式</text>
			<view class="divider-line"></view>
		</view>

		<view class="switch-button" @click="switchLoginType">
			<text>{{ loginType === 'quick' ? '手机号登录' : '一键登录' }}</text>
		</view> -->

		<!-- 一键登录手机号选择弹窗 -->
		<!-- <uni-popup ref="phonePopup" type="bottom" :mask-click="true" :safe-area="true">
			<view class="phone-popup">
				<view class="popup-header">
					<view style="display: flex;">
						<image src="/static/Frame 5.png" mode="aspectFit"
							style="width: 50rpx;height: 50rpx;margin-right: 10rpx;"></image>
						<text class="popup-title">启点</text>
					</view>
					<uni-icons type="info" size="24" color="#999" @click="showInfoPopup"></uni-icons>
				</view>
				<view class="popup-content">
					<text class="popup-desc">申请获取并验证你的手机号</text>
					<text class="popup-subdesc">便于对用户的相关操作进行追踪和维护</text>

					<view class="phone-list">
						<view class="phone-item" @click="selectPhone('166****6666')">
							<text>166****6666</text>
							<text class="phone-tag">微信绑定号码</text>
						</view>
						<view class="phone-item" @click="selectPhone('166****8888')">
							<text>166****8888</text>
						</view>
					</view>

					<view class="deny-btn" @click="closePhonePopup">
						<text>不允许</text>
					</view>
				</view>
			</view>
		</uni-popup> -->

		<!-- 信息说明弹窗 -->
		<uni-popup ref="infoPopup" type="bottom" :mask-click="true" :safe-area="true">
			<view class="info-popup">
				<view class="info-header">
					<text class="info-title">第三方用户信息授权说明</text>
					<uni-icons type="closeempty" size="24" color="#999" @click="closeInfoPopup"></uni-icons>
				</view>
				<view class="info-content">
					<text class="info-text">
						您授权后，小程序开发者将收集您的手机号，为您提供相关服务。开发者严格按照《启点直播小程序隐私保护指引》处理您的个人信息，如您发现开发者不当处理您的个人信息，可以进行投诉。
					</text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@dcloudio/uni-ui/lib/uni-popup/uni-popup.vue'
	import uniIcons from '@dcloudio/uni-ui/lib/uni-icons/uni-icons.vue'

	export default {
		components: {
			uniPopup,
			uniIcons
		},
		data() {
			return {
				loginType: 'quick',
				agreed: false,
				phoneNumber: '',
				smsCode: '',
				countdown: 0,
				timer: null,
				phoneError: '',
				smsError: '',
				mockSmsCode: ''
			}
		},
		methods: {
			switchLoginType() {
				this.loginType = this.loginType === 'quick' ? 'phone' : 'quick';
				// 切换时清空错误提示
				this.phoneError = '';
				this.smsError = '';
			},

			// 验证手机号格式
			validatePhone() {
				if (!this.phoneNumber) {
					this.phoneError = '请输入手机号';
					return false;
				}
				if (!/^1[3-9]\d{9}$/.test(this.phoneNumber)) {
					this.phoneError = '请输入正确的手机号';
					return false;
				}
				this.phoneError = '';
				return true;
			},

			// 清空验证码错误
			clearSmsError() {
				this.smsError = '';
			},

			// 发送验证码
			sendSMSCode() {
				if (this.countdown > 0) return;

				// 验证手机号格式
				if (!this.validatePhone()) {
					return;
				}

				// 生成随机验证码
				this.mockSmsCode = Math.floor(100000 + Math.random() * 900000).toString();
				console.log('模拟发送验证码:', this.mockSmsCode, '到手机:', this.phoneNumber);

				uni.showToast({
					title: '验证码已发送',
					icon: 'none'
				});

				// 开始倒计时
				this.countdown = 60;
				this.timer = setInterval(() => {
					this.countdown--;
					if (this.countdown <= 0) {
						clearInterval(this.timer);
					}
				}, 1000);
			},

			// 验证验证码
			validateSmsCode() {
				if (!this.smsCode) {
					this.smsError = '请输入验证码';
					return false;
				}
				// if (this.smsCode !== this.mockSmsCode) {
				// 	this.smsError = '验证码不正确';
				// 	return false;
				// }
				this.smsError = '';
				return true;
			},

			handleQuickLoginClick() {
				if (!this.agreed) {
					uni.showToast({
						title: '请先同意用户协议',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				this.$refs.phonePopup.open();
			},

			handlePhoneLoginClick() {
				if (!this.agreed) {
					uni.showToast({
						title: '请先同意用户协议',
						icon: 'none',
						duration: 2000
					});
					return;
				}

				// 验证手机号
				if (!this.validatePhone()) {
					return;
				}

				// 验证验证码
				if (!this.validateSmsCode()) {
					return;
				}

				// 验证通过，执行登录
				console.log('手机号登录:', this.phoneNumber, '验证码验证通过');

				// 生成唯一10位数字ID
				function generateUniqueId() {
					// 获取当前时间戳的后6位（确保在短时间内不会重复）
					const timestampPart = Date.now().toString().slice(-6);
					// 生成4位随机数补全到10位
					const randomPart = Math.floor(1000 + Math.random() * 9000).toString();
					return timestampPart + randomPart;
				}

				// 使用示例
				const randomId = generateUniqueId();
				const userInfo = {
					phone: this.phoneNumber,
					nickname: '用户' + this.phoneNumber.slice(-4),
					avatar: '/static/image-my/Group 11095@2x.png',
					id: randomId
				};

				uni.setStorageSync('userInfo', userInfo);
				uni.$emit('updateUserInfo', userInfo);

				uni.switchTab({
					url: '/pages/my/my'
				});
			},

			toggleAgreement(e) {
				this.agreed = e.detail.value.length > 0;
			},

			showInfoPopup() {
				this.$refs.infoPopup.open();
			},

			closeInfoPopup() {
				this.$refs.infoPopup.close();
			},

			closePhonePopup() {
				this.$refs.phonePopup.close();
			},

			selectPhone(phone) {
				console.log('选择的手机号:', phone);
				this.closePhonePopup();

				const userInfo = {
					phone: phone,
					nickname: phone === '166****6666' ? '用户A' : '用户B',
					avatar: '/static/image-my/Group 11095@2x.png',
					id: phone === '166****6666' ? '123456' : '654321'
				};

				uni.setStorageSync('userInfo', userInfo);
				uni.$emit('updateUserInfo', userInfo);

				uni.switchTab({
					url: '/pages/my/my'
				});
			},

			showAgreement() {
				uni.navigateTo({
					url: '/pages/agreement/agreement?type=service'
				});
			},

			showPrivacy() {
				uni.navigateTo({
					url: '/pages/agreement/agreement?type=privacy'
				});
			}
		},
		beforeDestroy() {
			if (this.timer) {
				clearInterval(this.timer);
			}
		}
	}
</script>

<style scoped>
	.login-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		height: 90vh;
		padding: 60rpx 40rpx 0;
		background-color: #ffffff;
		box-sizing: border-box;
		overflow: hidden;
	}

	.logo {
		display: flex;
		flex-direction: column;
		margin-bottom: 80rpx;
		margin-top: 40rpx;
		flex-shrink: 0;
	}

	.logo image {
		width: 150rpx;
		height: 150rpx;
	}

	.main-login-area {
		width: 100%;
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.login-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		flex: 1;
	}

	.login-btn {
		width: 100%;
		max-width: 600rpx;
		height: 90rpx;
		line-height: 90rpx;
		background-color: #1E90FF;
		border-radius: 45rpx;
		color: #ffffff;
		font-size: 32rpx;
		text-align: center;
		margin-bottom: 30rpx;
	}

	.agreement {
		font-size: 24rpx;
		color: #999999;
		text-align: center;
		line-height: 36rpx;
		margin-bottom: 30rpx;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.agreement-checkbox {
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.agreement-text {
		display: block;
		margin-bottom: 10rpx;
	}

	.agreement-links {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
	}

	.link {
		color: #1E90FF;
		margin: 0 5rpx;
	}

	.input-group {
		width: 100%;
		max-width: 600rpx;
		margin-bottom: 40rpx;
	}

	.input-item {
		display: flex;
		align-items: center;
		padding: 30rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
		position: relative;
	}

	.input-item input {
		flex: 1;
		font-size: 30rpx;
		height: 50rpx;
	}

	.input-with-icon {
		display: flex;
		align-items: center;
		width: 100%;
		position: relative;
	}

	.input-icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 20rpx;
		flex-shrink: 0;
	}

	.input-with-icon input {
		flex: 1;
		padding-left: 10rpx;
		height: 60rpx;
		font-size: 30rpx;
	}

	/* 调整原有样式 */
	.input-item {
		position: relative;
		padding: 30rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.send-code {
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		font-size: 28rpx;
		color: #1E90FF;
		padding: 5rpx 15rpx;
		border-radius: 30rpx;
		z-index: 10;
	}

	.send-code {
		position: absolute;
		right: 0;
		font-size: 28rpx;
		color: black;
		padding: 5rpx 15rpx;
		border-radius: 30rpx;
	}

	.send-code.disabled {
		color: #999;
		background-color: #f5f5f5;
	}

	.error-msg {
		position: absolute;
		left: 0;
		bottom: 5rpx;
		font-size: 24rpx;
		color: #ff4d4f;
	}

	.switch-login-type {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: auto;
		padding: 20rpx 0;
	}

	.divider-line {
		flex: 1;
		height: 1rpx;
		background-color: #f0f0f0;
	}

	.divider-text {
		padding: 0 20rpx;
		font-size: 24rpx;
		color: #999;
	}

	.switch-button {
		width: 100%;
		text-align: center;
		padding: 20rpx 0 40rpx;
		font-weight: 700;
		font-size: 28rpx;
	}

	.phone-popup {
		background-color: #fff;
		padding: 30rpx;
		border-radius: 20rpx 20rpx 0;
	}

	.popup-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.popup-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}

	.popup-content {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.popup-desc {
		font-size: 32rpx;
		font-weight: 700;
		margin-bottom: 10rpx;
	}

	.popup-subdesc {
		font-size: 28rpx;
		color: #999;
		margin-bottom: 40rpx;
	}

	.phone-list {
		width: 100%;
		margin-bottom: 40rpx;
	}

	.phone-item {
		padding: 30rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.phone-tag {
		font-size: 24rpx;
		color: #1E90FF;
		background-color: #e6f2ff;
		padding: 5rpx 15rpx;
		border-radius: 20rpx;
	}

	.deny-btn {
		width: 100%;
		text-align: center;
		padding: 25rpx 0;
		color: #999;
		font-size: 30rpx;
	}

	.info-popup {
		background-color: #fff;
		padding: 30rpx;
		border-radius: 20rpx 20rpx 0 0;
	}

	.info-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.info-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.info-content {
		padding: 0 20rpx 30rpx;
	}

	.info-text {
		font-size: 28rpx;
		color: #666;
		line-height: 1.6;
	}
</style>